<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/x-icon" href="../ico/ai45v-vjnuj-001.ico">
    
    <!-- CSS only -->
    <link href="./css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <!-- JavaScript Bundle with Popper -->
    <script src="./js/bootstrap.bundle.min.js"
        integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous">
        </script>
    <script src="./js/jquery-3.4.1.min.js"></script>

    <title>菜品浏览</title>
</head>

<body>
    <!-- 导航栏 -->
    <nav class="navbar bg-light fixed-top bg-warning">
        <div class="container-fluid   bg-warning  fixed-top " style="height: 7%;">
            <a class="h3" href="/" style="text-decoration: none;color: black;">美食居</a>
            <button class="navbar-toggler" style="background-color: rgb(208, 171, 5); height: 80%;" type="button"
                data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasDarkNavbar"
                aria-labelledby="offcanvasDarkNavbarLabel">
                <div class="offcanvas-header">
                    <h4 class="offcanvas-title" id="offcanvasDarkNavbarLabel">导航</h4>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"
                        aria-label="Close"></button>
                </div>
                <div class="offcanvas-body">
                    <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
                        <img src="./Head_p" alt="" style="width: 30%;border-radius: 1000px;">
                        <li class="nav-item"><a id="login" class="nav-link" href="./login">登录</a></li>

                        <li class="nav-item">
                            <a class="nav-link" href="#">关于我们</a>
                        </li>
                    </ul>
                    <form class="d-flex mt-3">
                        <input class="form-control me-1" type="text" placeholder="搜索你想要的菜品吧~" aria-label="Search"
                            id="searchinput">
                        <button class="btn btn-success" type="button" id="Search">搜索</button>
                    </form>
                </div data-position>
            </div>
        </div>
    </nav>

    <!-- 分类选项 -->
    <div class="chooses nav justify-content-center mb-5" style="margin-top: 10%;">
        <div class=" d-inline-block me-2">
            <button class=" btn btn-secondary btn-sm" type="button" id="mycollections">
                我的收藏
            </button>
        </div>
    </div>

    <!-- 展示面板 -->
    <div class="container">
        <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3" id="container">
        </div>
    </div>

    <!-- 分页
    <nav aria-label="Page navigation example " class="nav justify-content-center mt-5">
        <ul class="pagination">
            <li class="page-item">
                <a class="page-link" href="#" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <li class="page-item"><a class="page-link" href="#">1</a></li>
            <li class="page-item"><a class="page-link" href="#">2</a></li>
            <li class="page-item"><a class="page-link" href="#">3</a></li>
            <li class="page-item">
                <a class="page-link" href="#" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav> -->
    <script src="./js/recipe.js"></script>

</body>

</html>